<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用Vue完成简易购物车</title>
     <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
        <!--
        需求：
        1.作出如图的展示效果

        2.点击购买加号则数量增加,总价格随之更变 

        3.如果书本数量为1则不能减少

        4.点击移除,删除该行,总价格随之更变

        5.使用VUE + HMLT 实现该案例

    -->
    <div id = app>
        <table border="1px" width="60%" height="550px" align="center" cellspacing="1px">
            <tr style="background-color: aliceblue;">
                <th width="7%"></th>
                <th width="35%">书籍名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            <!-- <tr>
                <td>1</td>
                <td>《java编程思想》</td>
                <td>2020-9</td>
                <td>¥98.00</td>
                <td><button>-</button>1<button>+</button></td>
                <td><button>移除</button></td>
            </tr> -->
            <tr v-for = "(item,index) in items" align="center" style="background-color: rgb(227, 249, 255);">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <td>¥{{item.price}}</td>
                <td><button :disabled="item.count === 1" @click="deleteCount(index)">-</button>{{item.count}}<button @click="addCount(index)">+</button></td>
                <td><button @click.prevent="deleteItem(index)">移除</button></td>
            </tr>
        </table>
        <h2 @load="Sum()" align="center">总价格：¥ {{sum}}</h2>
    </div>
    
</body>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            items:[{
                name:"《java编程思想》",
                date:"2020-9",
                price:98.00,
                count:1
            },
            {
                name:"《数据分析与数据原理》",
                date:"2019-2",
                price:39.00,
                count:1
            },
            {
                name:"《Hadoop权威指南》",
                date:"2019-10",
                price:59.00,
                count:1
            },
            {
                name:"《代码大全》",
                date:"2018-8",
                price:128.00,
                count:1
            }],
            sum:98.00+39.00+59.00+128.00
        },
        methods:{
            Sum:function(){
                var sum = 0;
                // alert(this.sum);
                for(i in this.items){
                    sum += this.items[i].count*this.items[i].price;
                    // alert(sum);
                }
                this.sum = sum;
            },
            deleteItem:function(index){
                // alert(index)
                if(confirm("您是否确认删除？")){
                    //删除一行元素
                    this.items.splice(index,1);
                }
                this.Sum();
            },
            addCount:function(index){
                this.items[index].count++;
                
                this.Sum();
                // alert(this.sum)
                
            },
            deleteCount:function(index){
                this.items[index].count--;
                this.Sum();
                // alert(this.sum)
            }
        }
    })
</script>
</html>